/**
 * Created by HZH
 * Date-Time: 2022-02-16
 */

import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import React from 'react';

export default (props) => {
  const { height = '240px', data = [] } = props;
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      selectedMode: false,
      top: '2%',
      right: '2%',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        fontSize: 12,
        color: '#fff',
      },
    },
    xAxis: {
      type: 'category',
      // splitLine: {
      //   show: false
      // },
      data: ['2022-02-18', '2022-02-19', '2022-02-20', '2022-02-21', '2022-02-22', '2022-02-23'],
    },
    yAxis: {
      type: 'value',
      // splitLine: {
      //   show: false
      // }
    },
    series: [
      {
        name: '报警',
        data: [20, 12, 31, 25, 20, 14],
        type: 'line',
        smooth: true,
        color: 'red',
      },
      {
        name: '预警',
        data: [5, 26, 11, 14, 18, 21, 27],
        type: 'line',
        smooth: true,
        color: 'blue',
      },
    ],
  };

  return <ReactEcharts style={{ height, width: '100%' }} option={option} />;
};
